<script setup lang="ts">
import { onBeforeMount, ref, watch } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
import { usePublicHooks } from "../hooks";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    Id: "",
    title: "",
    status: 1,
    username: "",
    password: "",
    name: "",
    entryDate: "",
    phone: "",
    email: "",
    jobTitleId: "",
    gender: 1,
    remarks: "",
    corpId: "",
    jobTitleIdOptions: 0,
    isAdmin: 1
  })
});
const { switchStyle } = usePublicHooks();
const genderOptions = [
  {
    value: 1,
    label: "男"
  },
  {
    value: 2,
    label: "女"
  }
];
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const jobTitleIdOptions = ref([]);
function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
import { useColumns } from "./utils/columns";
const selectRef = ref();
const { columns, pagination, selectValue, dataList, rowStyle } = useColumns();
/** 行点击 */
function onRowClick(row) {
  selectValue.value = row.name;
  selectRef.value.blur();
  newFormInline.value.corpId = row.corpId;
}
import { getJobTitleListApi } from "@/api/corpUserApi";
onBeforeMount(() => {
  getJobTitleListApi().then(res => {
    for (var i = 0; i < res.result.length; i++) {
      jobTitleIdOptions.value.push({
        jobTitleId: res.result[i].jobTitleId,
        name: res.result[i].name
      });
    }
  });
});
import { getCorpShowApi } from "@/api/corpApi";
import { getCurrentDate } from "@pureadmin/utils";
watch(
  () => selectValue.value,
  newValue => {
    getCorpShowApi({ corpId: newFormInline.value.corpId }).then(res => {
      newFormInline.value.username = res.result.phone;
      newFormInline.value.phone = res.result.phone;
      newFormInline.value.name = res.result.principal;
      newFormInline.value.password = "123456";
      newFormInline.value.status = 1;
      newFormInline.value.gender = 1;
      // newFormInline.value.entryDate = getCurrentDate({ type: 2 }).ymd;
    });
  },
  { immediate: false }
);
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="企业" prop="corpId">
          <el-select
            ref="selectRef"
            v-model="selectValue"
            class="!w-[600px]"
            placeholder="请选择"
            value-key="corpId"
            clearable
          >
            <template #empty>
              <div class="m-4">
                <pure-table
                  row-key="corpId"
                  alignWhole="center"
                  :header-cell-style="{
                    background: 'var(--el-fill-color-light)',
                    color: 'var(--el-text-color-primary)'
                  }"
                  :row-style="rowStyle"
                  :data="dataList"
                  :columns="columns"
                  :pagination="pagination"
                  @row-click="onRowClick"
                />
              </div>
            </template>
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="登录账号" prop="username">
          <el-input
            v-model="newFormInline.username"
            clearable
            placeholder="请输入登录账号"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="昵称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入昵称"
          />
        </el-form-item>
      </re-col>

      <re-col
        v-if="newFormInline.title === '新增'"
        :value="12"
        :xs="24"
        :sm="24"
      >
        <el-form-item label="用户密码" prop="password">
          <el-input
            v-model="newFormInline.password"
            clearable
            placeholder="请输入用户密码"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            clearable
            placeholder="请输入手机号"
			type="number"
			class="no_number"
			oninput="if(value.length>11)value=value.slice(0,11)"
          />
        </el-form-item>
      </re-col>

      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="newFormInline.email"
            clearable
            placeholder="请输入邮箱"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="用户性别" prop="gender">
          <el-select
            v-model="newFormInline.gender"
            placeholder="请选择用户性别"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in genderOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="职位" prop="jobTitleId">
          <el-select
            v-model="newFormInline.jobTitleId"
            placeholder="请选择职位"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in jobTitleIdOptions"
              :key="index"
              :label="item.name"
              :value="item.jobTitleId"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="权限" prop="isAdmin">
          <el-switch
            v-model="newFormInline.isAdmin"
            inline-prompt
            :inactive-value="1"
            :active-value="0"
            inactive-text="管理员"
            active-text="普通用户"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>
      <re-col :value="7" :xs="24" :sm="24">
        <el-form-item label="入职时间" prop="entryDate">
          <el-date-picker
            v-model="newFormInline.entryDate"
            type="date"
            class="!w-[160px]"
            placeholder="请选择日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="用户状态" prop="status">
          <el-switch
            v-model="newFormInline.status"
            inline-prompt
            :active-value="1"
            :inactive-value="2"
            active-text="启用"
            inactive-text="停用"
            :style="switchStyle"
          />
        </el-form-item>
      </re-col>
      <re-col>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="newFormInline.remarks"
            placeholder="请输入备注信息"
            type="textarea"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
<style scoped></style>
